<template>
	<view class="audio-message">
		<view class="audio-player" >
			<button class="play-btn" :class="{ playing: isPlaying }" @touchend.prevent="togglePlay">
				<text class="iconfont">{{ isPlaying ? '⏸' : '▶' }}</text>
			</button>

			<view class="progress-bar">
				<view class="progress-track"></view>
				<view class="progress-current" :style="{ width: 450*progress + 'rpx' }"></view>
				<view class="progress-thumb" :style="{ left: 450*progress + 'rpx' }"></view>
			</view>
			<view class="audio-info">
				<text class="audio-duration">{{ msg.content.duration + ' s' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		
		title: {
			type: String,
			default: '音频消息'
		},
		msg:{
			type:Object,
			required:true
		}
	},
	data() {
		return {
			isPlaying: false,
			progress: 0,
			audioContext: null
		};
	},
	watch:{
		process:{
			handler(newval){
				console.log(this.progress)
				console.log(newval);
			}
		}
	},

	beforeDestroy() {
		// 页面卸载时停止播放并销毁音频上下文
		if(this.audioContext){
		this.audioContext.stop();
		this.audioContext.destroy();}
		
	},
	methods: {
		// 切换播放/暂停
		togglePlay() {
			if (this.isPlaying) {
				this.audioContext.pause();
			} else {
				this.audioContext = uni.createInnerAudioContext();
				this.audioContext.src = this.msg.content.voicePath;
				this.audioContext.play();
				this.audioContext.onTimeUpdate((res) => {
	
					if (this.msg.content.duration > 0) {
						this.progress = (this.audioContext.currentTime / this.msg.content.duration);
						console.log('进度', this.progress);
					}
				});

				// 音频播放结束
				this.audioContext.onEnded(() => {
					this.isPlaying = false;
					this.progress = 0;
					this.audioContext.seek(0);
					this.audioContext.destroy();
					console.log('结束了');
				});
			}
			this.isPlaying = !this.isPlaying;
		}
	}
};
</script>

<style scoped>
.audio-message {
	padding: 20rpx;
	background-color: #f9f9f9;
	border-radius: 10rpx;
}

.audio-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 15rpx;
}

.audio-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.audio-duration {
	font-size: 24rpx;
	color: #999;
}

.audio-player {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15rpx;
	width: 480rpx;
}

.play-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background-color: #007aff;
	color: white;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	padding: 0;
}
.playing {
	background-color: #0051aa;
}

.progress-bar {
	flex: 1;
	height: 8rpx;
	background-color: #e5e5e5;

	border-radius: 4rpx;
	position: relative;
}

.progress-track {
	position: absolute;
	left: 0;
	top: 0;
  	background-color: #e5e5e5;
	border-radius: 4rpx;
}

.progress-current {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: #007aff;
	border-radius: 4rpx;
	transition: width 0.3s ease;
}

.progress-thumb {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 20rpx;
	height: 20rpx;
	background-color: #007aff;
	border-radius: 50%;
	box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.2);
}
</style>
